@min-width: 1.64rem;
.c7ncd-pipelines {
  height: 100%;
}
.c7ncd-pipelines-header-title {
  display: flex;
  margin-left: 10px;
  height: 30px;
  &-info {
    width: 250px;
  }
  div {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #0f1358;
  }
}

.c7ncd-pipelines-detail {
  display: flex;
  height: ~'calc(100% - 30px)';
  &-title {
    font-size: 0.2rem;
    margin-bottom: 0.16rem;
    font-weight: 500;

    &-appService {
      color: var(--text-color4);
    }
  }
  &-info {
    &-detail {
      margin: 0 10px;
      width: 224px;
      position: relative;
      background: #f5f8ff;
      border-radius: 4px;
      border: 1px solid #6887e8;
      &-title {
        margin: 10px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #0f1358;
        display: flex;
        justify-content: space-between;
      }
      &-line {
        position: absolute;
        width: 20px;
        height: 1px;
        background: #a6a6c0;
        top: 73px;
        left: 222px;
      }
      &-content {
        margin: 10px;
        background: #ffffff;
        padding-left: 5px;
        padding-top: 7px;
        padding-bottom: 7px;
        border-radius: 2px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(15, 19, 88, 0.65);
        .c7ncd-continuous-deployment-basic-configuration-card {
          border: none !important;
          box-shadow: none;
        }
      }
    }
  }
  &-content {
    display: flex;
    width: 100%;
    height: 100%;
    background: rgba(245, 246, 250, 0.3);
    border-radius: 4px;
    border-radius: 4px;
    border: 2px dotted rgba(222, 225, 233, 0.9);
    border-bottom: none;
    min-height: ~'calc(100vh - 2.4rem)';
    overflow-x: scroll;
  }

  &-stage {
    border-right: 2px dotted rgba(14, 29, 128, 0.1);
    width: 2.2rem;
    position: relative;
    flex-shrink: 0;

    &:last-child {
      border: none;

      .c7ncd-pipelines-detail-stage-line {
        width: 50%;
      }
    }
    &-title {
      font-family: PingFangSC-Medium, PingFang SC, sans-serif;
      font-size: 14px;
      font-weight: 500;
      padding: 0.16rem 0.2rem;
      display: flex;
      align-items: center;
      &-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      &-type {
        flex-shrink: 0;
      }
    }

    &-line {
      border-bottom: 1px solid #a6a6c0;
      position: absolute;
      top: 0.72rem;
      width: ~'calc(100% - 0.15rem)';
    }

    &-arrow {
      color: #6887e8;
      position: absolute;
      left: -0.16rem;
      top: 0.68rem;
      z-index: 10;
      line-height: 0;

      .icon {
        font-size: 0.32rem;
      }
    }
  }

  &-job {
    background: rgba(239, 243, 252, 1);
    border-radius: 4px;
    border: 1px solid rgba(104, 135, 232, 1);
    width: 1.64rem;
    padding: 0.08rem;
    margin: 0 auto 0.32rem;
    position: relative;
    z-index: 10;
    &-icon {
      font-size: 18px;
      display: block;
      color: var(--help-icon-color);
      margin-right: 4px;
    }

    &-title {
      font-weight: 500;
      color: #3a345f;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &-content {
      margin-top: 10px;
      padding-top: 7px;
      padding-bottom: 7px;
      padding-left: 5px;
      background: #ffffff;
      border-radius: 2px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(15, 19, 88, 0.65);
      &-details {
        div {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    &-task {
      color: var(--text-color3);
      font-size: 0.12rem;
      background-color: #fff;
      word-break: break-all;
      margin-top: 0.08rem;
      line-height: 0.2rem;

      &-item {
        padding: 0.1rem;
        border-bottom: 1px solid;
        border-image: linear-gradient(to right, rgba(216, 220, 235, 1), rgba(216, 220, 235, 0.4)) 30
          30;

        &:last-child {
          border-bottom: none;
        }
      }

      &-sonar {
        padding: 0.1rem;

        &-type {
          display: block;
          margin-bottom: 0.02rem;
        }
      }

      &-deploy {
        padding: 0.1rem;

        &-item {
          display: block;
          margin-bottom: 0.02rem;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }

      &-branch {
        padding: 0.1rem;
      }
    }

    &-CD {
      background: rgba(233, 242, 248, 1);
      border: 1px solid rgba(63, 178, 233, 1);

      .c7ncd-pipelines-detail-job-title {
        color: #224a6b;
        display: block !important;
      }
    }

    &-rect {
      &-left {
        border-left: 1px solid #a6a6c0;
        border-bottom: 1px solid #a6a6c0;
        border-bottom-left-radius: 0.1rem;
        width: 0.33rem;
        position: absolute;
        top: 0.72rem;
        left: 0.17rem;

        &:before {
          width: 0.05rem;
          height: 0.05rem;
          content: '';
          border-radius: 50%;
          border: 1px solid #a6a6c0;
          background-color: #fff;
          display: block;
          margin: -0.025rem 0 0 -0.0275rem;
        }
      }

      &-right {
        border-right: 1px solid #a6a6c0;
        border-bottom: 1px solid #a6a6c0;
        border-bottom-right-radius: 0.1rem;
        width: 0.33rem;
        position: absolute;
        top: 0.72rem;
        right: 0.17rem;

        &:after {
          width: 0.05rem;
          height: 0.05rem;
          content: '';
          border-radius: 50%;
          border: 1px solid #a6a6c0;
          background-color: #fff;
          display: block;
          margin: -0.025rem 0 0 0.3rem;
        }
      }
    }
  }
}
